<template>
  <div class="OfficialCenter">
    <el-popover
      placement="bottom"
      trigger="click">
      <el-checkbox-group
        v-model="checkedTabs"
        :max="7">
          <el-checkbox
            v-for="list in tabList"
            :label="list.name"
            :key="list.id">
            {{list.name}}
          </el-checkbox>
        <el-button type="success" @click="submit">确定</el-button>
      </el-checkbox-group>
      <el-button slot="reference">配置选项卡</el-button>
    </el-popover>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="list in checkList"  :key="list.name"  :label="list.name">
        <a>{{ list.content }}</a>
      </el-tab-pane>
    </el-tabs>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'OfficialCenter',
  data () {
    return {
      activeName: 'first',
      checkedTabs: [], // 选中的checkbox
      tabList: [], // 全部tab
      checkList: [] // 选中的list
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event);
    },
    submit () {
      this.checkList = this.tabList.filter(item => this.checkedTabs.includes(item.name));
      console.log(this.checkList)
    }
  },
  created () {
    this.$api.getTabs({
      orgId: 11
    }).then(res => {
      this.tabList = res
    })
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">

</style>
